<!DOCTYPE html>
<html lang="en" class="app">
<head>  
  <meta charset="utf-8" />
  <title>Musik | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="../css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="../css/animate.css" type="text/css" />
  <link rel="stylesheet" href="../css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="../css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="../css/font.css" type="text/css" />
  <link rel="stylesheet" href="../css/app.css" type="text/css" />
    <!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
    <![endif]-->
</head>
<body class="">
    <section class="hbox stretch">
    <!-- .aside -->
    <aside class="bg-light aside b-r animated fadeInLeftBig">
      <section class="vbox">
        <header class="header b-b navbar">
          <a class="btn btn-link pull-right visible-xs" data-toggle="class:show" data-target=".nav-primary">
            <i class="fa fa-bars"></i>
          </a>
          <a href="index.html" class="navbar-brand">Documents</a>
        </header>
        <section class="scrollable">
          <nav class="nav-primary hidden-xs nav-docs">
            <ul class="nav">
              <li class="dropdown-header b-b b-light"><em>CSS</em></li>
              <li><a href="#icons">Icons</a></li>
              <li><a href="#animate">Animate</a></li>
              <li><a href="#colors">Colors</a></li>
              <li><a href="#layout">Layout</a></li> 
              <li><a href="#offscreen">Off screen</a></li>
              <li><a href="#utilities">Utilities</a></li>                           
              <li class="dropdown-header b-b b-light"><em>Components</em></li>
              <li><a href="#toggle-class">Toggle class</a></li>
              <li><a href="#shift">Shift</a></li>
              <li><a href="#bjax">Bjax</a></li>
              <li><a href="#button-state">Button state</a></li>
              <li><a href="#dropdown-select">Dropdown select</a></li>
              <li class="dropdown-header b-b b-light"><em>Plugins</em></li>
              <li><a href="#plugins">Plugins docs</a></li>
            </ul>
          </nav>
        </section>
      </section>
    </aside>
    <!-- /.aside -->
    <section id="content">
      <section class="vbox">
        <section class="scrollable bg-light lter" data-spy="scroll" data-target=".nav-primary">
          <section  id="docs">
            <div class="clearfix padder">
              <h3>Overview</h3>
              <h5 class="m-t-lg">A fully responsive web app template.</h5>
              <h3 class="text-success">CSS <small>Extensible classes</small></h3>
              <div class="line"></div>
              <p id="bootstrap">For the bootstrap css and components, please check the <strong><a href="http://getbootstrap.com">Bootstrap 3</a></strong></p>

              <h4 class="m-t-lg">LESS</h4>
              <p>This file's css is generated by LESS files. you can use the less.php to output the css. There are many Variables, Mixins you can use.</p>

              <h4 id="icons" class="m-t-lg">Icons</h4>
              <p>Use FontAwesome font icons, over 369 icons with version 4.0 and more will be added in the future, check <strong><a href="http://fortawesome.github.io/Font-Awesome/">FontAwesome</a></strong> for more details to see how to use and examples</p>

              <h4 id="animate" class="m-t-lg">Animate.css</h4>
              <p><a href="http://daneden.me/animate/"><strong>animate.css</strong></a> is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. do not use animate css to an element which contains the dropdown-menu, it will cut the edge.</p>
              <p><strong>animate.css on landing page</strong>: you can add animate css on the dom element when it appear in the viewpoint. <code>&lt;div data-ride="animated" data-animation="fadeInUp" data-delay="250">&lt;/div></code></p>

              <h4 id="colors" class="m-t-lg">Colors <small>use less file to build your colors</small></h4>
              <p>8 default color palettes, build colorful widgets. you can open the less/app.variables.less to config your own colors(<code>@brand-primary, @brand-success, @brand-warning, @brand-danger, @brand-info, @brand-black, @brand-dark, @brand-light</code>).
              </p>
              <p>You can use the mixin wariant. use <code>.color-variant</code> and <code>.font-variant</code> to build the color scheme, check more details in the less/app.colors.less.</p>
              <div class="row">
                <div class="col-sm-3">
                  <p>.bg-light</p>
                  <div class="bg-light">
                    <h5 class="dker m-n wrapper">.dker</h5>
                    <h5 class="dk m-n wrapper">.dk</h5>
                    <h5 class=" m-n wrapper">.bg-light</h5>
                    <h5 class="lt m-n wrapper">.lt</h5>
                    <h5 class="lter m-n wrapper">.lter</h5>
                  </div>
                </div>                
                <div class="col-sm-3">
                  <p>.bg-dark</p>
                  <div class="bg-dark">
                    <h5 class="dker m-n wrapper">.dker</h5>
                    <h5 class="dk m-n wrapper">.dk</h5>
                    <h5 class=" m-n wrapper">.bg-dark</h5>
                    <h5 class="lt m-n wrapper">.lt</h5>
                    <h5 class="lter m-n wrapper">.lter</h5>
                  </div>
                </div>
                <div class="col-sm-3">
                  <p>.bg-black</p>
                  <div class="bg-black">
                    <h5 class="dker m-n wrapper">.dker</h5>
                    <h5 class="dk m-n wrapper">.dk</h5>
                    <h5 class=" m-n wrapper">.bg-black</h5>
                    <h5 class="lt m-n wrapper">.lt</h5>
                    <h5 class="lter m-n wrapper">.lter</h5>
                  </div>
                </div>
                <div class="col-sm-3">
                  <p>.bg-primary</p>
                  <div class="bg-primary">
                    <h5 class="dker m-n wrapper">.dker</h5>
                    <h5 class="dk m-n wrapper">.dk</h5>
                    <h5 class=" m-n wrapper">.bg-primary</h5>
                    <h5 class="lt m-n wrapper">.lt</h5>
                    <h5 class="lter m-n wrapper">.lter</h5>
                  </div>
                </div>
              </div>
              <div class="row m-t-sm">                
                <div class="col-sm-3">
                  <p>.bg-success</p>
                  <div class="bg-success">
                    <h5 class="dker m-n wrapper">.dker</h5>
                    <h5 class="dk m-n wrapper">.dk</h5>
                    <h5 class=" m-n wrapper">.bg-success</h5>
                    <h5 class="lt m-n wrapper">.lt</h5>
                    <h5 class="lter m-n wrapper">.lter</h5>
                  </div>
                </div>
                <div class="col-sm-3">
                  <p>.bg-info</p>
                  <div class="bg-info">
                    <h5 class="dker m-n wrapper">.dker</h5>
                    <h5 class="dk m-n wrapper">.dk</h5>
                    <h5 class=" m-n wrapper">.bg-info</h5>
                    <h5 class="lt m-n wrapper">.lt</h5>
                    <h5 class="lter m-n wrapper">.lter</h5>
                  </div>
                </div>
                <div class="col-sm-3">
                  <p>.bg-warning</p>
                  <div class="bg-warning">
                    <h5 class="dker m-n wrapper">.dker</h5>
                    <h5 class="dk m-n wrapper">.dk</h5>
                    <h5 class=" m-n wrapper">.bg-warning</h5>
                    <h5 class="lt m-n wrapper">.lt</h5>
                    <h5 class="lter m-n wrapper">.lter</h5>
                  </div>
                </div>
                <div class="col-sm-3">
                  <p>.bg-danger</p>
                  <div class="bg-danger">
                    <h5 class="dker m-n wrapper">.dker</h5>
                    <h5 class="dk m-n wrapper">.dk</h5>
                    <h5 class=" m-n wrapper">.bg-danger</h5>
                    <h5 class="lt m-n wrapper">.lt</h5>
                    <h5 class="lter m-n wrapper">.lter</h5>
                  </div>
                </div>
              </div>
              <h4 id="layout" class="m-t-lg">Layout</h4>
              <p>use .vbox(vertical box) and .hbox(horizontal box) to build the web application layout. you can build the complicated layout as you want.</p>
              <h5><strong>hbox</strong></h5>
              <p>hbox is a horizontal wrapper that you can put columns in it. you can put <code>&lt;aside></code> and <code>&lt;section></code> in it. </p>
              <pre><code class="html">&lt;section class="hbox">&lt;aside class="aside-lg">&lt;/aside>&lt;section>&lt;/section>&lt;/section></code></pre>
              <p>you can use <code>.aside, .aside-sm, .aside-md, .aside-lg</code> to set the width of an aside wrapper. also you can use the Bootstrap grid system, like <code>.col-6, .col-7</code>...</p>
              <p>.stretch box has the 100% height. <code>&lt;section class="hbox stretch">&lt;/section></code></p>
              <h5><strong>vbox</strong></h5>
              <p>vbox is a vertical wrapper that you can put the row in it. </p>
              <pre><code class="html">&lt;section class="vbox">&lt;header class="header">&lt;/header>&lt;section class="w-f">&lt;/section>&lt;footer class="footer">&lt;/footer>&lt;/section></code></pre>
              <p>.w-f means this vbox have a footer</p>
              <p>.flex vbox let you put a flex height of the header/footer.</p>
              <pre><code class="html">&lt;section class="vbox flex">&lt;header>&lt;/header>&lt;section>&lt;section>&lt;section>&lt;/section>&lt;/section>&lt;/section>&lt;footer>&lt;/footer>&lt;/section></code></pre>
              <h5><strong>Example</strong></h5>
              <div class="row">
                <div class="col-sm-6">
                  <p>.hbox</p>
                  <div style="height:250px">
                    <div class="app">
                      <section class="hbox stretch bg-light">
                        <aside class="lt">aside</aside>
                        <section>section</section>
                        <aside class="dk">aside</aside>
                      </section>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6">
                  <p>.vbox</p>
                  <div style="height:250px">
                    <div class="app">
                      <section class="vbox bg-light">
                        <header class="header lt"><span class="pull-in">header</span></header>
                        <footer class="footer dk"><span class="pull-in">footer</span></footer>
                        <section>section</section>                    
                      </section>
                    </div>
                  </div>
                </div>
              </div>
              <h5><strong>Application layout</strong></h5>
              <p>you can use the .app on the html tag to build the app layout <code>&lt;html class="app">&lt;/html></code></p>
              <h4 id="offscreen" class="m-t-lg">Off screen nav</h4>
              <p>Support three nav styles on mobile, "Pull down", "push left", "push right"</p>
              <h5><strong>Pull down</strong></h5>
              <p>use <code>data-toggle="class:show" data-target=".nav-primary"</code> to trigger the nav pull down in the header</p>
        <pre><code class="html"><a class="btn btn-link visible-xs" data-toggle="class:show" data-target=".nav-primary">
          <i class="icon-reorder"></i>
        </a></code></pre>
              <h5><strong>off screen push left</strong></h5>
              <p>use <code>data-toggle="class:nav-off-screen" data-target="#nav"</code> to trigger the off screen nav</p>
        <pre><code class="html"><a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen" data-target="#nav">
        <i class="icon-reorder"></i>
        </a></code></pre>
              <p>use <code>data-toggle="class:nav-off-screen" data-target="#nav"</code> to toggle back in the body</p>
        <pre><code class="html"><a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a></code></pre>
              <h5><strong>off screen push right</strong></h5>
              <p>use <code>data-toggle="class:nav-off-screen push-right" data-target="body"</code></p>
        <pre><code class="html"><a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen push-right" data-target="body">
        <i class="icon-reorder"></i>
        </a></code></pre>


              <h3 id="utilities" class="text-danger">CSS Utilities</h3>
              <table class="table table-border">
                <tbody>
                  <tr class="bg-light">
                    <td colspan="2">Button size <em>(Specific button size)</em></td>
                  </tr>
                  <tr>
                    <td>.btn-s-xs</td>
                    <td>width:90px</td>
                  </tr>
                  <tr>
                    <td>.btn-s-sm</td>
                    <td>width:100px</td>
                  </tr>
                  <tr>
                    <td>.btn-s-md</td>
                    <td>width:120px</td>
                  </tr>
                  <tr>
                    <td>.btn-s-lg</td>
                    <td>width:150px</td>
                  </tr>
                  <tr>
                    <td>.btn-s-xl</td>
                    <td>width:200px</td>
                  </tr>
                  <tr>
                    <td>.btn-rounded</td>
                    <td>rounded button</td>
                  </tr>
                  <tr>
                    <td>.btn-icon</td>
                    <td>square icon button</td>
                  </tr>
                  <tr class="bg-light">
                    <td colspan="2">Vertical align <em>(When you use the .hbox you can use these classes on the aside)</em></td>
                  </tr>
                  <tr>
                    <td>.v-middle</td>
                    <td>vertical align: middle</td>
                  </tr>
                  <tr>
                    <td>.v-top</td>
                    <td>vertical align: top</td>
                  </tr>
                  <tr>
                    <td>.v-bottom</td>
                    <td>vertical align: bottom</td>
                  </tr>
                  <tr class="bg-light">
                    <td colspan="2">Margin</td>
                  </tr>
                  <tr>
                    <td>.m</td>
                    <td>margin: 15px</td>
                  </tr>
                  <tr>
                    <td>.m-xs</td>
                    <td>margin: 5px</td>
                  </tr>
                  <tr>
                    <td>.m-sm</td>
                    <td>margin: 10px</td>
                  </tr>
                  <tr>
                    <td>.m-md</td>
                    <td>margin: 20px</td>
                  </tr>
                  <tr>
                    <td>.m-lg</td>
                    <td>margin: 30px</td>
                  </tr>
                  <tr>
                    <td>.m-n</td>
                    <td>margin: 0px</td>
                  </tr>
                  <tr>
                    <td>.m-l</td>
                    <td>margin-left: 15px</td>
                  </tr>
                  <tr>
                    <td>.m-l-xs</td>
                    <td>margin-left: 5px</td>
                  </tr>
                  <tr>
                    <td>.m-l-sm</td>
                    <td>margin-left: 10px</td>
                  </tr>
                  <tr>
                    <td>.m-l-md</td>
                    <td>margin-left: 20px</td>
                  </tr>
                  <tr>
                    <td>.m-l-lg</td>
                    <td>margin-left: 30px</td>
                  </tr>
                  <tr>
                    <td>.m-l-xl</td>
                    <td>margin-left: 40px</td>
                  </tr>
                  <tr>
                    <td>.m-l-none</td>
                    <td>margin-left: 0px</td>
                  </tr>
                  <tr>
                    <td>.m-l-n</td>
                    <td>margin-left: -15px</td>
                  </tr>
                  <tr>
                    <td>.m-l-n-xxs</td>
                    <td>margin-left: -1px</td>
                  </tr>
                  <tr>
                    <td>.m-l-n-xs</td>
                    <td>margin-left: -5px</td>
                  </tr>
                  <tr>
                    <td>.m-l-n-sm</td>
                    <td>margin-left: -10px</td>
                  </tr>
                  <tr>
                    <td>.m-l-n-md</td>
                    <td>margin-left: -20px</td>
                  </tr>
                  <tr>
                    <td>.m-l-n-lg</td>
                    <td>margin-left: -30px</td>
                  </tr>
                  <tr>
                    <td>.m-l-n-xl</td>
                    <td>margin-left: -40px</td>
                  </tr>
                  <tr>
                    <td colspan="2">.m-r <em>(margin right)</em> , m-t <em>(margin top)</em> , m-b <em>(margin bottom)</em> have the same classes as the .m-l.</td>
                  </tr>
                  <tr class="bg-light">
                    <td colspan="2">Border</td>
                  </tr>
                  <tr>
                    <td>.b-a</td>
                    <td>border:1px solid @border-color(see app.variables.less)</td>
                  </tr>
                  <tr>
                    <td>.b-l</td>
                    <td>border left</td>
                  </tr>
                  <tr>
                    <td>.b-t</td>
                    <td>border top</td>
                  </tr>
                  <tr>
                    <td>.b-r</td>
                    <td>border right</td>
                  </tr>
                  <tr>
                    <td>.b-b</td>
                    <td>border bottom</td>
                  </tr>
                  <tr>
                    <td>.b-light, .b-dark, .b-primary, .b-success, .b-info, .b-warning, .b-danger, .b-black, .b-white</td>
                    <td>border with specific color.</td>
                  </tr>
                  <tr>
                    <td>.b-2x</td>
                    <td>border width with 2px</td>
                  </tr>
                  <tr>
                    <td>.b-3x</td>
                    <td>border width with 3px</td>
                  </tr>
                  <tr class="bg-light">
                    <td colspan="2">Radius</td>
                  </tr>
                  <tr>
                    <td>.r</td>
                    <td>border-radius: @border-radius-base</td>
                  </tr>
                  <tr>
                    <td>.r-l</td>
                    <td>border-radius: @border-radius-base 0 0 @border-radius-base</td>
                  </tr>
                  <tr>
                    <td>.r-r</td>
                    <td>border-radius: 0 @border-radius-base @border-radius-base 0</td>
                  </tr>
                  <tr>
                    <td>.r-t</td>
                    <td>border-radius: @border-radius-base @border-radius-base 0 0</td>
                  </tr>
                  <tr>
                    <td>.r-b</td>
                    <td>border-radius: 0 0 @border-radius-base @border-radius-base</td>
                  </tr>
                  <tr class="bg-light">
                    <td colspan="2">Padder and Wrapper</td>
                  </tr>
                  <tr>
                    <td>.padder</td>
                    <td>padding-left: 15px; padding-right: 15px</td>
                  </tr>
                  <tr>
                    <td>.padder-v</td>
                    <td>padding-top: 15px; padding-bottom: 15px</td>
                  </tr>
                  <tr>
                    <td>.padder-md</td>
                    <td>padding-top: 20px; padding-bottom: 20px</td>
                  </tr>
                  <tr>
                    <td>.padder-lg</td>
                    <td>padding-top: 30px; padding-bottom: 30px</td>
                  </tr>
                  <tr>
                    <td>.no-padder</td>
                    <td>padding: 0</td>
                  </tr>
                  <tr>
                    <td>.wrapper</td>
                    <td>padding: 15px</td>
                  </tr>
                  <tr>
                    <td>.wrapper-sm</td>
                    <td>padding: 10px</td>
                  </tr>
                  <tr>
                    <td>.wrapper-xs</td>
                    <td>padding: 5px</td>
                  </tr>
                  <tr>
                    <td>.wrapper-md</td>
                    <td>padding: 20px</td>
                  </tr>
                  <tr>
                    <td>.wrapper-lg</td>
                    <td>padding: 30px</td>
                  </tr>
                  <tr>
                    <td>.wrapper-xl</td>
                    <td>padding: 50px</td>
                  </tr>
                  <tr class="bg-light">
                    <td colspan="2">Text</td>
                  </tr>
                  <tr>
                    <td>.text-u-c</td>
                    <td>text uppercase</td>
                  </tr>
                  <tr>
                    <td>.text-l-t</td>
                    <td>text line through</td>
                  </tr>
                  <tr>
                    <td>.text-u-l</td>
                    <td>text under line</td>
                  </tr>
                  <tr>
                    <td>.text-ellipsis</td>
                    <td>display text in one line with ellipsis</td>
                  </tr>
                  <tr>
                    <td>.text-center-xs</td>
                    <td>center text only on extra small devices</td>
                  </tr>
                  <tr>
                    <td>.text-left-xs</td>
                    <td>align text left only on extra small devices</td>
                  </tr>
                  <tr>
                    <td>.text-right-xs</td>
                    <td>align text right only on extra small devices</td>
                  </tr>
                  <tr class="bg-light">
                    <td colspan="2">Item</td>
                  </tr>
                  <tr>
                    <td>.item-overlay</td>
                    <td>overlay the element on an item, default display:none, with '.active' class will show</td>
                  </tr>
                  <tr>
                    <td>.opactiy</td>
                    <td>background with transparent</td>
                  </tr>
                  <tr>
                    <td>.gd</td>
                    <td>background with gradient</td>
                  </tr>
                  <tr>
                    <td>.top</td>
                    <td>top element on a item element</td>
                  </tr>
                  <tr>
                    <td>.bottom</td>
                    <td>bottom element on a item element</td>
                  </tr>
                  <tr>
                    <td>.center</td>
                    <td>center element on a item element</td>
                  </tr>
                  <tr class="bg-light">
                    <td colspan="2">Media</td>
                  </tr>
                  <tr>
                    <td>.img-full</td>
                    <td>width: 100%</td>
                  </tr>
                  <tr>
                    <td>.thumb-lg</td>
                    <td>width: 128px</td>
                  </tr>
                  <tr>
                    <td>.thumb-md</td>
                    <td>width: 64px</td>
                  </tr>
                  <tr>
                    <td>.thumb</td>
                    <td>width: 50px</td>
                  </tr>
                  <tr>
                    <td>.thumb-sm</td>
                    <td>width: 48px</td>
                  </tr>
                  <tr>
                    <td>.thumb-xs</td>
                    <td>width: 38px</td>
                  </tr>
                  <tr class="bg-light">
                    <td colspan="2">Avatar</td>
                  </tr>
                  <tr>
                    <td>.avatar</td>
                    <td>circle photo</td>
                  </tr>
                  <tr>
                    <td>status</td>
                    <td>status, '.on', '.off', '.busy', '.away'</td>
                  </tr>
                  <tr>
                    <td>status position</td>
                    <td>status position, '.right', '.bottom'</td>
                  </tr>
                  <tr>
                    <td>status size</td>
                    <td>status size, '.sm', '.md'</td>
                  </tr>
                </tbody>
              </table>

              <h3 class="text-info">Components <small>Lightweight components to best practice on mobile</small></h3>
              <div class="line"></div>


              <h4 id="toggle-class">Toggle class</h4>
              <p>It's easy to change a dom class by click on another dom element.</p>
              <h5><strong>Usage</strong></h5>
              <p>
                Add <code>data-toggle="class:className"</code> and <code>data-target="#target"</code> to a link or button to toggle a class.
              </p>
              <h5><strong>Example</strong></h5>
              <a href="#" class="btn btn-default m-b" data-toggle="class:btn-* btn-success">
                Toggle the background
              </a>
        <pre><code class="html"><button class="btn btn-default" data-toggle="class:btn-success" data-target="#btn">
          
          
          
          Toggle the background
        </button></code></pre>

              <h4 id="shift" class="m-t-lg">Shift</h4>
              <p>Shift js let you change the dom which have different position from mobile to desktop, it avoid to use duplicate elements.</p>
              <div id="shift-target"><strong>Usage</strong></div>
              <p>
                Add <code>data-toggle="shift:insertBefore"</code> and <code>data-target="#target"</code> to the dom that you want to shift.
              </p>
              <div class="panel shift b-light" data-toggle="shift:insertBefore" data-target="#shift-target"><div class="panel-body">Put me before "Usage" on mobile</div></div>
        <pre><code class="html">&lt;div class="shift" data-toggle="shift:insertBefore" data-target="#shift-target">
          Put me before "Usage" on mobile
        &lt;/div></code></pre>
              <p>it also support <code>data-toggle="shift:appendTo"</code>, <code>data-toggle="shift:prependTo"</code>, <code>data-toggle="shift:insertAfter"</code></p>


              <h4 id="bjax" class="m-t-lg">Bjax</h4>
              <p>Bjax let you load page via ajax method</p>
              <h5><strong>Usage</strong></h5>
              <p>
                Add <code>data-bjax</code> to a link or button.<br>
                <code>data-url</code> load content url<br>
                <code>data-target</code> load content to a target element<br>
                <code>data-el</code> just get element from the loaded content<br>
                <code>data-replace</code> replace the location<br>                
              </p>
              <h5><strong>Example</strong></h5>
              <a href="ajax.pie.html" data-bjax data-target="#bjax-target" class="btn btn-default">Load Me</a>
              <a href="blog.html" data-bjax data-target="#bjax-target" data-el="#content .row" class="btn btn-default">Load Page Element</a>
              <a href="index.html" data-bjax class="btn btn-default">Load Page</a>
              <div id="bjax-target" class="clearfix m-t m-b"></div>

              <pre><code class="html"><a href="blog.html" data-bjax data-target="#bjax-target" data-el="#content .row" class="btn btn-default">Load Page Element</a></code></pre>
              <h4 id="button-state" class="m-t-lg">Button state</h4>
              <p>Change the button state when click on it. add <code>.text</code> <code>.text-active</code></p>
              <h5><strong>Example</strong></h5>
              <button class="btn btn-default m-b" data-toggle="button">
                <span class="text">More</span>
                <span class="text-active">Less</span>
              </button>
        <pre><code class="html"><button class="btn btn-default" data-toggle="button">
        
        
        
        <span class="text">More</span>
        <span class="text-active">Less</span>
        </button></code></pre>
              <h5><strong>With icons</strong></h5>
              <button class="btn btn-default m-b" data-toggle="button">
                <span class="text">
                  <i class="fa fa-thumbs-up text-success"></i> 25
                </span>
                <span class="text-active">
                  <i class="fa fa-thumbs-down text-danger"></i> 10
                </span>
              </button>
        <pre><code class="html"><button class="btn btn-default" data-toggle="button">
        
        
        
        <span class="text">
          <i class="fa fa-thumbs-up text-success"></i> 25
        </span>
        <span class="text-active">
          <i class="fa fa-thumbs-down text-danger"></i> 10
        </span>
        </button></code></pre>

        <h4 id="dropdown-select" class="m-t-lg">Dropdown select</h4>
              <p>Support radio and checkbox dropdown select</p>
              <h5><strong>Usage</strong></h5>
              <p>add <code>.dropdown-menu</code> class on dropdown-menu.</p>
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle">
                  <span class="dropdown-label">Option1</span> 
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-select">
                    <li class="active"><input type="radio" name="d-s-r" checked=""><a href="#">Option1</a></li>
                    <li><input type="radio" name="d-s-r"><a href="#">Option2</a></li>
                    <li><input type="radio" name="d-s-r"><a href="#">Option3</a></li>
                    <li class="disabled"><input type="radio" name="d-s-r" disabled=""><a href="#">I'm disabled</a></li>
                </ul>
              </div>
        <pre class="m-t"><code class="html">&lt;div class="btn-group">
        <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle">
          
          
          
          <span class="dropdown-label">Option1</span> 
          <span class="caret"></span>
        </button>
        &lt;ul class="dropdown-menu dropdown-select">
            &lt;li class="active"><input type="radio" name="d-s-r" checked=""><a href="#">Option1</a>&lt;/li>
            &lt;li><input type="radio" name="d-s-r"><a href="#">Option2</a>&lt;/li>
            &lt;li><input type="radio" name="d-s-r"><a href="#">Option3</a>&lt;/li>
            &lt;li class="disabled"><input type="radio" name="d-s-r" disabled=""><a href="#">I'm disabled</a>&lt;/li>
        &lt;/ul>
        &lt;/div>
        </code></pre>
        <div class="btn-group">
          <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle">
            <span class="dropdown-label" data-placeholder="Please select">Please select</span> 
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu dropdown-select">
            <li><input type="checkbox" name="d-s-c-1"><a href="#">Option1</a></li>
            <li><input type="checkbox" name="d-s-c-2"><a href="#">Option2</a></li>
            <li><input type="checkbox" name="d-s-c-3"><a href="#">Option3</a></li>
            <li><input type="checkbox" name="d-s-c-4"><a href="#">Option4</a></li>
            <li><input type="checkbox" name="d-s-c-5"><a href="#">Option5</a></li>
          </ul>
        </div>
        <pre class="m-t"><code class="html">&lt;div class="btn-group">
        <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle">
          
          
          
          <span class="dropdown-label" data-placeholder="Please select">Please select</span> 
          <span class="caret"></span>
        </button>
        &lt;ul class="dropdown-menu dropdown-select">
          &lt;li><input type="checkbox" name="d-s-c-1"><a href="#">Option1</a>&lt;/li>
          &lt;li><input type="checkbox" name="d-s-c-2"><a href="#">Option2</a>&lt;/li>
          &lt;li><input type="checkbox" name="d-s-c-3"><a href="#">Option3</a>&lt;/li>
          &lt;li><input type="checkbox" name="d-s-c-4"><a href="#">Option4</a>&lt;/li>
          &lt;li><input type="checkbox" name="d-s-c-5"><a href="#">Option5</a>&lt;/li>
        &lt;/ul>
        &lt;/div>
        </code></pre>
        <h3 class="text-info" id="plugins">Plugins</h3>
        <div class="line"></div>                   
        <div class="row">
          <div class="col-md-6">
              <h4 class="m-t-lg">jPlayer</h4>
              <p>Check the online <a href="http://jplayer.org/"><strong>document</strong></a>

              <h4 class="m-t-lg">Datatables</h4>
              <p>Check the online <a href="http://datatables.net/"><strong>document</strong></a>. </p>

              <h4 class="m-t-lg">Google map</h4>
              <p>Check the online <a href="http://hpneo.github.com/gmaps/"><strong>document</strong></a>. </p>

              <h4 class="m-t-lg">JvectorMap</h4>
              <p>Check the online <a href="http://jvectormap.com/"><strong>document</strong></a>. </p>

              <h4 class="m-t-lg">Markdown</h4>
              <p>Check the online <a href="https://github.com/OscarGodson/EpicEditor"><strong>document</strong></a>. </p>

              <h4 class="m-t-lg">Nestable</h4>
              <p>Check the online <a href="http://dbushell.github.io/Nestable/"><strong>document</strong></a>. </p>

              <h4 class="m-t-lg">Slider</h4>
              <p>Check the online <a href="http://www.eyecon.ro/bootstrap-slider"><strong>document</strong></a>. </p>

              <h4 class="m-t-lg">WYSISYG</h4>
              <p>Check the online <a href="http://github.com/mindmup/bootstrap-wysiwyg"><strong>document</strong></a>. </p>

              <h4 class="m-t-lg">Wizard</h4>
              <p>Check the online <a href="https://github.com/VinceG/twitter-bootstrap-wizard"><strong>document</strong></a>. </p>
          </div>
          <div class="col-md-6">
              <h4 class="m-t-lg">Tiles</h4>
              <p>Check the online <a href="https://github.com/thinkpixellab/tilesjs"><strong>document</strong></a>. </p>

              <h4 class="m-t-lg">Sortable</h4>
              <p>Check the online <a href="http://farhadi.ir/projects/html5sortable"><strong>document</strong></a>. </p>

              <h4 class="m-t-lg">Flotchart</h4>
              <p>Check the online <a href="http://www.flotcharts.org/"><strong>document</strong></a>. </p>

              <h4 class="m-t-lg">Sparklines</h4>
              <p>Check the online <a href="http://omnipotent.net/jquery.sparkline"><strong>document</strong></a>. </p>

              <h4 class="m-t-lg">Easy pie chart</h4>
              <p>Check the online <a href="http://rendro.github.io/easy-pie-chart"><strong>document</strong></a>. </p>

              <h4 class="m-t-lg">Parsley</h4>
              <p>Check the online <a href="http://parsleyjs.org/"><strong>document</strong></a>. </p>
              
              <h4 class="m-t-lg">Chosen</h4>
              <p>Check the online <a href="http://github.com/harvesthq/chosen"><strong>document</strong></a>. </p>
              
              <h4 class="m-t-lg">Datepicker</h4>
              <p>Check the online <a href="http://www.eyecon.ro/bootstrap-datepicker"><strong>document</strong></a>. </p>

              <h4 class="m-t-lg">File-input</h4>
              <p>Check the online <a href="http://dev.tudosobreweb.com.br/bootstrap-filestyle/"><strong>document</strong></a>. </p>
          </div>
        </div>
              <h4 class="m-t-lg">Cross browser compatibility</h4>
              <p>Use response.js to support IE8 media queries and html5.js to support html5 markups.</p>
        <pre><code class="html"><!--[if lt IE 9]>
            <script src="js/ie/respond.min.js"></script>
            <script src="js/ie/html5.js"></script>
            <script src="js/ie/excanvas.js"></script>
            <![endif]--></code></pre>
            </div>
          </section>
        </section>
      </section>
    </section>
  </section>
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="js/bootstrap.js"></script>
  <!-- App -->
  <script src="js/app.js"></script>
  <script src="js/slimscroll/jquery.slimscroll.min.js"></script>
    <!-- Easy Pie Chart -->
  <script src="js/charts/easypiechart/jquery.easy-pie-chart.js"></script>
  <script src="js/app.plugin.js"></script>
  <script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="js/jPlayer/add-on/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="js/jPlayer/demo.js"></script>

</body>
</html>